body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #1C1E26;
}

.site-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    transition: all 0.3s ease-in-out;
}

header {
    background-color: #21252E;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.right-links {
    display: flex;
    gap: 10px; /* 设置链接之间的间距 */
}

header h1 {
    color: #FFFFFF;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
}

header a {
    text-decoration: none;
    color: #A0AEC0;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease-in-out;
}

header a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

main {
    flex-grow: 1;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2B2F38;
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
    background-color: #1D212A;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input[type="text"] {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: none;
    outline: none;
    background-color: #21252E;
    color: #BEC6CF;
    border-bottom: 2px solid #4A5568;
    transition: border-color 0.3s ease-in-out;
}

input[type="text"]:focus {
    border-bottom-color: #88C0D0;
}

button#bt {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: none;
    outline: none;
    background-color: #4C566A;
    color: #ECEFF4;
    border-radius: 0 0 10px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

button#bt:hover {
    background-color: #88C0D0;
}

footer {
    padding: 20px;
    background-color: #1C1E26;
    text-align: center;
    color: #A0AEC0;
    font-size: 14px;
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.tag-line {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px; /* 根据需要调整高度 */
    margin: 20px 0; /* 上下外边距，根据需要调整 */
}

.tag-line > div {
    color: #BEC6CF;
    padding: 0 10px; /* 左右内边距，根据需要调整 */
    line-height: 40px; /* 与高度一致，保证文字垂直居中 */
}

.tag-line .tag-label {
    padding: 0 10px;
    line-height: 40px; /* 与标签行高度保持一致 */
    color: #A0AEC0; /* 与标签及其他文本颜色保持一致 */
    font-weight: bold; /* 可选，增加权重以突出提示信息 */
    border-right: none; /* 不需要边框 */
}

.tag-item {
    /* 正常状态下标签的样式 */
    padding: 0 10px;
    line-height: 40px;
    color: #A0AEC0;
    cursor: pointer;
    border-radius: 4px; /* 添加圆角效果，您可以根据需要调整数值大小 */
    /* 其他样式... */
}

.tag-item.selected {
    /* 高亮状态下标签的样式 */
    color: #fff;
    background-color: #88C0D0;
    border-radius: 4px; /* 保持圆角效果与正常状态一致 */
    /* 其他高亮样式... */
}

.tag-dropdown {
    display: inline-block;
    margin-left: 1em; /* 调整此值以调整间距 */
}

#displayCountSelect {
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
    font-size: inherit;
    color: inherit;
}

#displayCountSelect:focus {
    outline: none;
}

#displayCountSelect option {
    font-size: inherit;
    padding: 0.25em 1em;
}

.tag-item.custom-tag {
    /* 移除自定义标签的边框样式，如有 */
    border: none;
    cursor: pointer;
}

#customTagName {
    /* 移除自定义输入框的边框样式 */
    border: none;

    /* 其他原有的样式保留不变 */
    padding: 5px 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

